<!--交易记录-->

<template>
  <div class="setpwd">
    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
      <div class="top1">{{title}}</div>

    </div>
    <div class="jyrecord">

      <div class="row">
        <div class="left">手机号</div>
        <div class="right"><input type="text" v-model="mobile" placeholder="请输入手机号"></div>
      </div>
      <div class="row yzm">
        <div class="left">验证码</div>
        <div class="right"><input type="text" v-model="code" placeholder="请输入验证码"></div>
        <span class="hqyzm" v-show="show" @click="editegetyzm">获取验证码</span>
        <span class="hqyzm" v-show="!show">{{count}}</span>
      </div>
      <div class="row">
        <div class="left">支付密码</div>
        <div class="right"><input type="password" v-model="paypassword" placeholder="请输入支付密码"></div>
      </div>

    </div>

    <van-button size="large" class="submit" @click="editepaypwd">保 存</van-button>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        //查询动态
        count: '',
        timer: null,
        paypassword: '',
        mobile: '',
        code: '',
        show: true,
        title: '设置支付密码'
      }
    },
    created() {
      var status = this.$route.query.paypwd
      if (status == '已设置') {
        this.title = '修改支付密码'
      } else if (status == '未设置') {
        this.title = '设置支付密码'
      }
      console.log(status)
    },
    methods: {

      //获取验证码
      editegetyzm: function () {
        var that = this;

        if (that.mobile == "") {

          that.$toast({
            message: "手机号码不能为空",
          })
        } else if (that.mobile != "") {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(that.mobile)) {

            that.$toast({
              message: "请输入有效的手机号码",
            })
          } else {

            const TIME_COUNT = 60;
            if (!that.timer) {
              that.count = TIME_COUNT;
              that.show = false;
              that.timer = setInterval(() => {
                if (that.count > 0 && that.count <= TIME_COUNT) {
                  that.count--;
                } else {
                  that.show = true;
                  clearInterval(that.timer);
                  that.timer = null;
                }
              }, 1000)
            }
            ;

            that.$options.methods.sendyzm(that.mobile);

          }

        }
      },
      //发送
      sendyzm: function (mobile) {
        var that = this;
        console.log(mobile);
        $.ajax({
          type: "post",
          url: "http://zcapi.hrgsxt.cn/api/Login/send_sms",
          data: {
            mobile: mobile
          },
          cache: false,
          dataType: "json",
          success: function (data) {

            that.$toast({
              message: "发送成功",
            })

          }
        });
      },

      //修改支付密码
      editepaypwd: function () {
        var that = this;
        if (that.mobile == "") {

          that.$toast({
            message: "请输入手机号",
          })
        } else if (that.code == "") {

          that.$toast({
            message: "请输入验证码",
          })
        } else if (that.paypassword == "") {

          that.$toast({
            message: "请输入支付密码",
          })
        } else {

          $.ajax({
            type: "post",
            url: "http://zcapi.hrgsxt.cn/api/User_safe/pay_pwd",
            data: {
              token: localStorage.getItem("token"),
              mobile: that.mobile,
              code: that.code,
              pay_pwd: that.paypassword

            },
            cache: false,
            dataType: "json",
            success: function (data) {
              console.log(JSON.stringify(data) + "修改支付密码");
              if (data.code == 200) {
                that.$toast({
                  message: data.message,
                });
                that.$router.go(-1);

                // setTimeout(function () {
                //   that.$router.push({
                //     path: '/accountsecury'
                //   });
                // }, 1500);
              } else if (data.code == 400) {
                that.$toast({
                  message: data.message,
                });

              } else {
                that.$toast({
                  message: data.message,
                })
              }

            }
          });
        }

      }

    },
    components: {}
  }
</script>

<style scoped>
  .setpwd .yzm .hqyzm {
    display: block;
    float: right;
    width: 25%;
    text-align: center;
    height: 0.58rem;
    background-color: #E2E2E2;
    margin-top: 0.15rem;
    line-height: 0.58rem;
    font-size: 0.24rem;
    color: #0085F0;
    border-radius: 8px;
  }

  /*头部*/

  .my_header {
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    position: relative;
    padding: 0 .3rem;
  }

  .my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
  }

  .my_header .top1 {
    width: 40%;
    margin-left: 25%;
    float: left;
    text-align: center;
    letter-spacing: 2px;
  }

  .txlist .row .right input {
    border: none;
    outline: none;
    text-indent: 4em;
    text-align: right;
    padding-right: 0px !important;
  }

  /*查询记录*/

  .jyrecord {
    margin-top: 0px !important;
    width: 100%;
    font-size: 0.26rem !important;
    background-color: #FFFFFF;
  }

  .jyrecord .row {
    width: 100%;
    height: 0.88rem;
    background-color: #FFFFFF;
    line-height: 0.88rem;
    padding: 0px 0.3rem 0px 0.3rem;
    border-bottom: 1px solid #efefef;
  }

  /*.jyrecord .row:first-child {
        border-bottom: 1px solid #efefef;
    }*/

  .jyrecord .row .left {
    width: 25%;
    float: left;
    font-size: 0.3rem;
    color: #333333;
  }

  .jyrecord .row .right {
    color: #999999;
    width: 50%;
    float: left;
    font-size: 0.28rem;
    text-align: left;
  }

  .jyrecord .row .right img {
    width: 0.14rem;
    height: 0.24rem;
    vertical-align: middle;
    margin-left: 7px;
    margin-bottom: 3px;
  }

  .setpwd .row .right input {
    border: none;
    outline: none;
    line-height: 0.88rem;
    text-align: left;
    padding: 0px !important;
    margin-bottom: 0px !important;
  }

  .setpwd .submit {
    background-color: #0085F0;
    font-size: 0.34rem;
    color: #FFFFFF;
    width: 92%;
    margin-left: 4%;
    margin-top: 5%;
    height: 0.88rem;
    line-height: 0.88rem;
    border-radius: 12px;
  }
</style>
